<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/iconfont.css">
    <link rel="stylesheet" href="CSS/mi.css">
</head>
<body>
<div class="topbar">
    <div class="wrap">
        <ul class="header-left">
            <li><a href="#">小米商城</a><span class="sep">|</span></li>
            <li><a href="#">MIUI</a><span class="sep">|</span></li>
            <li><a href="#">IoT</a><span class="sep">|</span></li>
            <li><a href="#">云服务</a><span class="sep">|</span></li>
            <li><a href="#">天星数科</a><span class="sep">|</span></li>
            <li><a href="#">有品</a><span class="sep">|</span></li>
            <li><a href="#">小爱开放平台</a><span class="sep">|</span></li>
            <li><a href="#">企业团购</a><span class="sep">|</span></li>
            <li><a href="#">资质证照</a><span class="sep">|</span></li>
            <li><a href="#">协议规则</a><span class="sep">|</span></li>
            <li><a href="#">下载app</a><span class="sep">|</span>
                <div class="download">
                    <a href="#">
                        <img src="Images/download.png" alt="">
                        <p>
                            小米商城APP
                        </p>
                    </a>
                </div>
                <div class="triangle"></div>
            </li>
            <li><a href="#">Select Location</a></li>
        </ul>
        <ul class="header-right">
            <li ><span class="login"><a href="#">登录</a></span><span class="sep">|</span></li>
            <li><a href="#">注册</a><span class="sep">|</span></li>
            <li class="msg" ><a href="#">消息通知</a></li>
            <li class="cart">
                <a href="#"><span class="iconfont">&#xe698;</span> 购物车 (0)</a>
                <div class="cart-list"><p>购物车中还没有商品，赶紧选购吧！</p></div>
            </li>
        </ul>

    </div>
</div>
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <a href="#">
                <img src="Images/logo-mi2.png" alt="">               
            </a>

        </div>
        <div class="nav-item">
            <ul>
                <li><div class="category"></div></li>
                <li><a href="#">Xiaomi手机</a>
                    <div class="nav-item-list">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="nav-item-img">
                                            <img src="./Images/phone1.png" alt="">                                            
                                        </div>

                                        <p class="product-name">Xiaomi 12 Pro</p>
                                        <p class="price">4699元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-item-img">
                                            <img src="./Images/phone2.png" alt="">                                            
                                        </div>

                                        <p class="product-name">Xiaomi 12 Pro</p>
                                        <p class="price">4699元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-item-img">
                                            <img src="./Images/phone3.png" alt="">                                            
                                        </div>

                                        <p class="product-name">Xiaomi 12 Pro</p>
                                        <p class="price">4699元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-item-img">
                                            <img src="./Images/phone4.png" alt="">                                            
                                        </div>

                                        <p class="product-name">Xiaomi 12 Pro</p>
                                        <p class="price">4699元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-item-img">
                                            <img src="./Images/phone1.png" alt="">                                            
                                        </div>

                                        <p class="product-name">Xiaomi 12 Pro</p>
                                        <p class="price">4699元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="nav-item-img">
                                            <img src="./Images/phone1.png" alt="">                                            
                                        </div>

                                        <p class="product-name">Xiaomi 12 Pro</p>
                                        <p class="price">4699元起</p>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">Redmi红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">平板</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>   
        </div>      
        <div class="search">
            <input type="text" class="content" placeholder="小米11">            
            <button type="button" class="iconfont">&#xe63c;</button>
            <div class="search-list">
                <a href="#">全部商品</a>
                <a href="#">小米手机</a>
                <a href="#">小米平板</a>
                <a href="#">空气净化器</a>
                <a href="#">红米</a>
                <a href="#">净水器</a>
                <a href="#">耳机</a>
                <a href="#">电视</a>
            </div>
        </div>   


    </div>
</div>
<div class="banner">
    <div class="wrap">
        <div class="banner-box">
            <div class="slider">
                <ul>
                    <li>
                        <a href="">手机</a><i class="iconfont">&#xe665;</i>
                        <div class="slider-list">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span class="text">红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./Images/sliderList.png" alt="">
                                        <span>红米笔记本</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="">电视</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">笔记本 平板</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">家电</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">出行 穿戴</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">智能 路由器</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">电源 配件</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">健康 儿童</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">耳机 音箱</a><i class="iconfont">&#xe665;</i>
                    </li>
                    <li>
                        <a href="">生活 箱包</a><i class="iconfont">&#xe665;</i>
                    </li>
                </ul>
            </div>
            <div class="slidershow">
                <a href=""><img src="./Images/slidershow.jpg" alt=""></a>
            </div>  
        </div>
           
    </div>
</div>

<!-- 广告开始 -->
<div class="adv">
    <div class="wrap">
        <div class="adv-aside">
            <div class="aside-img row">
                <a href="#">
                    <img src="./Images/bzfw.png" alt="">   
                    <p>保障服务</p>     
                </a>
            </div>
            <div class="aside-img row">
                <a href="#" class="col">
                    <img src="./Images/qytg.png" alt="">   
                    <p>企业团购</p>     
                </a>
            </div>
            <div class="aside-img row">
                <a href="#" class="col">
                    <img src="./Images/bzfw.png" alt="">   
                    <p>F码通道</p>     
                </a>
            </div>
            <div class="aside-img">
                <a href="#">
                    <img src="./Images/bzfw.png" alt="">   
                    <p>米粉卡</p>     
                </a>
            </div>
            <div class="aside-img">
                <a href="#" class="col">
                    <img src="./Images/bzfw.png" alt="">   
                    <p>以旧换新</p>     
                </a>
            </div>
            <div class="aside-img">
                <a href="#" class="col">
                    <img src="./Images/bzfw.png" alt="">   
                    <p>话费充值</p>     
                </a>
            </div>

        </div>
        <div class="adv-img"><img src="./Images/redmi50.jpg" alt=""></div>
        <div class="adv-img"><img src="./Images/redmi50.jpg" alt=""></div>
        <div class="adv-img"><img src="./Images/redmi50.jpg" alt=""></div>      
    </div>
</div>
<!-- 广告结束 -->

<!-- 商品开始 -->
<div class="goods">
    <div class="wrap">
        <!-- 手机开始 -->
        <div class="phone">
            <div class="phone-hot">
                <img src="./Images/phonehot.jpg" alt="">
            </div>
            <div class="box-hd">
                <h2>手机</h2>
                <span class="more">
                    <a href="#" class="more-link">查看更多<i class="iconfont">&#xe778;</i> </a>     
                                
                </span>

            </div>
            <div class="phone-main">
                <div class="phone-main-hot"><a href="#"><img src="./Images/ac5cafc68c10ce4471869d378f594b52.png" alt=""></a></div>
                <ul>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="">
                            <h3>Xiaomi Civi 1S</h3>
                            <p>你的光芒 天生好看</p>
                            <p>2299元起</p>
                        </a>
                    </li>
                </ul> 
            </div>
        </div>
        <!-- 手机结束 -->
    </div>
</div>
<!-- 商品结束 -->

<!-- 链接开始 -->
<div class="footer">
    <div class="wrap">
    <div class="service">
        <ul>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe61b;</i>
                    预约维修                     
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe66c;</i>
                    7天无理由退货
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe6a2;</i>
                    15无免费换货
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe6a2;</i>
                    满69包邮
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe6a2;</i>
                    520余家货后网络
                </a>
            </li>
        </ul>
    </div>
    <div class="link">
        <div class="link-left">
            <ul>
                <li class="help">帮助中心</li>
                <li><a href="#">帐户管理</a></li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">订单操作</a></li>
            </ul>
            <ul>
                <li class="help">帮助中心</li>
                <li><a href="#">帐户管理</a></li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">订单操作</a></li>
            </ul>
            <ul>
                <li class="help">帮助中心</li>
                <li><a href="#">帐户管理</a></li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">订单操作</a></li>
            </ul>
            <ul>
                <li class="help">帮助中心</li>
                <li><a href="#">帐户管理</a></li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">订单操作</a></li>
            </ul>
            <ul>
                <li class="help">帮助中心</li>
                <li><a href="#">帐户管理</a></li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">订单操作</a></li>
            </ul>
            <ul>
                <li class="help">帮助中心</li>
                <li><a href="#">帐户管理</a></li>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">订单操作</a></li>
            </ul>

        </div>
        <div class="link-right">
            <p class="phone">400-100-5678</p>                
        </div>
    </div>
    </div>
</div>
<!-- 链接结束 -->
<div class="site-info">
    <img src="./Images/truste.png" alt="">
    我的测试inline-block
</div>
</body>
</html>